*{
    padding: 0;
    margin: 0;
    list-style: none;
}
html,body{
    height: 100%;
    overflow: hidden;
}


.wrap{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.page{
    height: 100%;
    overflow: hidden;
}
.page1{
    height: 100%;
    background-color: #fddd86;
}
.page2{
    height: 100%;
    background-color: blue;
}
.page3{
    height: 100%;
    background-color: green;
}
.page4{
    height: 100%;
    background-color: yellow;
}
.page5{
    height: 100%;
    background-color: #fedeed;
}




/*导航的样式*/

.kitty-navbar .navbar-inverse {
    background-color: rgba(0,0,0,0.8);
    border:none;
}
.kitty-navbar .navbar-inverse .navbar-brand {
    position:relative;
    padding-left:70px;
    font-weight:bold;
    color: #f189a9;
}

.kitty-navbar .navbar-inverse .navbar-brand:before{
    position:absolute;
    content:'';
    visibility:visible;
    display:block;
    width:50px;
    height:50px;
    left:10px;
    top: 0;
    background:url('../images/icon.png') 0 0 no-repeat;
    background-size:contain;
}
.kitty-navbar .navbar-inverse .navbar-brand:hover {
    color: #f189a9;
    background-color: transparent;
}
.kitty-navbar .navbar-inverse .navbar-text {
    color: #9d9d9d;
}
.kitty-navbar .navbar-inverse .navbar-nav > li > a {
    color:white;
}
.kitty-navbar .navbar-inverse .navbar-nav > li > a:hover{
    color: #f189a9;
    background-color: transparent;
}
.kitty-navbar .navbar-inverse .navbar-nav > .active > a,
.kitty-navbar .navbar-inverse .navbar-nav > .active > a:hover{
    color: #f189a9;
}
.kitty-navbar .navbar-inverse .navbar-nav > .disabled > a,
.kitty-navbar .navbar-inverse .navbar-nav > .disabled > a:hover,
.kitty-navbar .navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444;
    background-color: transparent;
}
.kitty-navbar .navbar-inverse .navbar-toggle {
    border-color: #333;
}
.kitty-navbar .navbar-inverse .navbar-toggle:hover,
.kitty-navbar .navbar-inverse .navbar-toggle:focus {
    background-color: #333;
}
.kitty-navbar .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}

.kitty-navbar i.nav-icon {
    display:inline-block;
    width:50px;
    height:50px;
    background:url("../images/icon.png");
}



.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}



/*底部的样式*/
.kitty-footer .navbar-inverse {
    background-color: rgba(0,0,0,1);
    border:none;
}
.kitty-footer .personinfor{
    text-align:center;
    line-height:50px;
    color: #f189a9;
}
.kitty-footer ul {
    height:50px;
    margin:0;
    padding:0;
}
.kitty-footer ul li{
    padding:0;
    margin:0;
    height:16px;
    font-size:12px;
    line-height:16px;
    text-align:center;
    color: #f189a9;
}


/*首屏的样式*/

.page1{
    -webkit-animation:page1-pao 15s linear infinite;
    -o-animation:page1-pao 15s linear infinite;
    animation:page1-pao 15s linear infinite;
}
@keyframes page1-pao{
    0%{
        background:url("../images/pao1.png") center top no-repeat,
        url("../images/pao2.png") center bottom no-repeat;
        background-color: #fddd86;
    }
    50%{
        background:url("../images/pao1.png") center bottom no-repeat,
        url("../images/pao2.png") center top no-repeat;
        background-color: #fddd86;
    }
    100%{
        background:url("../images/pao1.png") center top no-repeat,
        url("../images/pao2.png") center bottom no-repeat;
        background-color: #fddd86;
    }
}
.page1 .container{
    height:100%;
}
.page1 .container .row{
    height:100%;
}
.page1 .page1-infor{
    opacity:0;
    filter:alpha(opacity=0);
    height:100%;
    width:100%;
    background-color:skyblue;
    background:url("../images/page1-infor.png") center center no-repeat;
    background-size:contain;
}
.page1.current .page1-infor{
    opacity:1;
    filter:alpha(opacity=100);
    animation:personInfor 1s linear;
    -webkit-animation:personInfor 1s linear;
    -o-animation:personInfor 1s linear;
}
@keyframes personInfor{
    0%{
        opacity:0;
        filter:alpha(opacity=0);
        transform:rotateY(0deg) scale(0.2);
    }
    50%{
        opacity:0.5;
        filter:alpha(opacity=50);
        transform:rotateY(180deg) scale(1.4);
    }
    100%{
        opacity:1;
        filter:alpha(opacity=100);
        transform:rotateY(360deg) scale(1);
    }
}




/*二屏的特效*/
.page2{
    color:white;
    background:url('../images/page2_bg.png') 0 0 repeat;
}
.page2 .row {
    height:100%;
    padding-top:60px;
}
.page2 .page2-skill-l,.page2 .page2-skill-r{
    position:relative;
}
.page2 .page2-skill-r {
    margin:0 auto;
}
.page2 .skill-top {
    width:100%;
    height:100px;
    background:url("../images/page2-myskill.png") bottom center no-repeat;
    background-size:contain;
    padding:0px 0 10px 0;
    text-align:center;
    transition:all 1s;
    transform:translateY(-200px);
}
.page2.current .skill-top{
    transform:translateY(0px);
}
.page2 .skill-bottom {
    font:normal 18px/30px "微软雅黑";
    transform:translateY(500px);
}
.page2.current .skill-bottom{
    transition:all 1s;
    transform:translateY(0px);
}
.page2 .holder {
    width:100%;
    height:130px;
}
.page2 .candybar{
    width:90%;
    margin:0 auto;
    transform:translateX(800px);
}
.page2.current .candybar{
    transition:all 1s 0.5s;
    transform:translateX(0px);
}
.page2 .candybar div {
    height:20px;
    background-color:white;
    margin:35px 0 0px 0;
    border-radius: 10px;
    border:2px solid #fff;
    position:relative;
    box-shadow:2px 2px 2px  #ccc inset;
}
@keyframes move{
    from{}
    to{
        background-position:20px
    }
}


.page2 .candybar div:before{
    position:absolute;
    content:"html/css";
    color:#ea77b0;
    top:-28px;
}
.page2 .candybar div:after {
    position:absolute;
    width:80%;
    height:100%;
    content:"";
    background-color:pink;
    border-radius: 10px;
    background-image:linear-gradient(
    135deg,
    pink 0%,
    pink 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    pink 50%,
    pink 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
    background-size:20px 20px;
    animation:move 0.5s linear infinite;
    -webkit-animation:move 0.5s linear infinite;
    -o-animation:move 0.5s linear infinite;
}



.page2 .candybar div.candybar1:before{
    content:"html/css : 80%";
}
.page2 .candybar div.candybar1:after {
    background-color:#D6FA8E;
    width:0;
    background-image:linear-gradient(
    135deg,
    #D6FA8E 0%,
    #D6FA8E 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    #D6FA8E 50%,
    #D6FA8E 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
}
.page2.current .candybar div.candybar1:after{
    transition:all 1s 1s linear;
    width:80%;
}
.page2 .candybar div.candybar2:before{
    content:"javascript : 73%";
}
.page2 .candybar div.candybar2:after {
    background-color:#09ebe8;
    width:0;
    background-image:linear-gradient(
    135deg,
    #09ebe8 0%,
    #09ebe8 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    #09ebe8 50%,
    #09ebe8 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
}
.page2.current .candybar div.candybar2:after{
    transition:all 1s 1s linear;
    width:73%;
}
.page2 .candybar div.candybar3:before{
    content:"jQuery : 83%";
}
.page2 .candybar div.candybar3:after {
    background-color:#CC99CC;
    width:0;
    background-image:linear-gradient(
    135deg,
    #CC99CC 0%,
    #CC99CC 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    #CC99CC 50%,
    #CC99CC 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
}
.page2.current .candybar div.candybar3:after{
    transition:all 1s 1s linear;
    width:83%;
}
.page2 .candybar div.candybar4:before{
    content:"html5/css3 : 78%";
}
.page2 .candybar div.candybar4:after {
    background-color:#FFFF99;
    width:0;
    background-image:linear-gradient(
    135deg,
    #FFFF99 0%,
    #FFFF99 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    #FFFF99 50%,
    #FFFF99 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
}
.page2.current .candybar div.candybar4:after{
    transition:all 1s 1s linear;
    width:78%;
}

.page2 .candybar div.candybar5:before{
    content:"bootstrap : 60%";
}
.page2 .candybar div.candybar5:after {
    background-color:#FFCCCC;
    width:0;
    background-image:linear-gradient(
    135deg,
    #FFCCCC 0%,
    #FFCCCC 25%,
    #ff6a7b 25%,
    #ff6a7b 50%,
    #FFCCCC 50%,
    #FFCCCC 75%,
    #ff6a7b 75%,
    #ff6a7b 100%
    );
}
.page2.current .candybar div.candybar5:after{
    transition:all 1s 1s linear;
    width:60%;
}


/*三屏的效果*/
.page3 {
    background:url("../images/hootred2.png") 0 0 repeat;
    background-color:white;
}
.page3 .container {
    height:100%;
}
.page3 .row {
    padding:50px 0;
    height:100%;
}
.page3 .row>div{
    height:100%;
    padding:0;
    position:relative;
}
.page3 .page3-l{
    position:absolute;
    left: 5%;
    bottom:10%;
    height:70%;
    width:90%;
    background-color:white;
    border:6px solid #960202;
}

.page3 .page3-l:before {
    position:absolute;
    content:'';
    width:50%;
    height:20%;
    background-size:contain;
    top:-20%;
    background:url("../images/page3-two.png") 0 0 no-repeat;
    background-size:contain;
}
.page3.current .page3-l:before{
    transition:all 4s;
    animation:kittyrun 4s infinite;
    -webkit-animation:kittyrun 4s infinite;
    -o-animation:kittyrun 4s infinite;
}
@keyframes kittyrun{
    0%{
        transform:translateX(0px);
    }
    50%{
        transform:translateX(150px);
    }
    100%{
        transform:translateX(0px);
    }
}

.page3 .page3-l .slider{
    width:100%;
    height:100%;
    overflow:hidden;
}
.page3 .page3-l .slider ul {
    margin:0;
    height:100%;
    width:600%;
    position:relative;
}
.page3 .page3-l .slider ul li{
    float:left;
    width:16.66%;
    height:100%;
    vertical-align:middle;
    position:relative;
}


.page3 .page3-l .slider img {
    /*padding:2%;*/
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    vertical-align:middle;
}
.page3 .page3-l ol{
    position:absolute;
    margin:0px;
    left:50%;
    bottom:10%;
    transform:translateX(-50%);
}
.page3 .page3-l ol li{
    float:left;
    margin:0 5px;
    width:6px;
    height:6px;
    border-radius:3px;
    background-color:transparent;
    border:1px solid red;
}
.page3 .page3-l ol li.active{
    background-color:red;
}
.page3 .page3-l .arr{
    position:absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
}
.page3 .page3-l .arr span{
    color:white;
    font-size:20px;
    text-align:center;
    width:7%;
    height:7%;
    padding:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-size:contain;
}
.page3 .page3-l .arr span img {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    position:absolute;
    left: 0;
    top: 0;
}
.page3 .page3-l .arr span.left{
    left:8px;
}
.page3 .page3-l .arr span.right{
    right:8px;
}
.page3 .page3-r{
    height:100%;
    background-color:greenyellow;
    background:url("../images/hello.png") center center no-repeat;
}


/*四屏的效果*/
.page4 {
    background:url("../images/page4-bg2.png") 0 0 repeat;
}



/*五屛的效果*/
.page5{
    text-align:center;
    background:url("../images/strawberry_bg.png") 0 0 repeat;
    background-color: #fedeed;
}
.page5 .container{
    height:100%;
    padding:50px 0 50px 0;
}
.page5 .container .row{
    height:100%;
}
.page5 .page5-top{
    color:#88371c;
    font:normal 700 40px/100px "微软雅黑";
    width:100%;
    height:50%;
    position:relative;

    transform:translateY(700px);
}
.page5.current .page5-top{
    transition:all 1s;
    transform:translateY(0px);
}
.page5 .page5-top .page5-top-con {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.page5 .page5-top .page5-top-con:before{
    content:'';
    width:80px;
    height:80px;
    position:absolute;
    background:url("../images/strawkitty1.png") 0 0 no-repeat;
    background-size:contain;
    left:-90px;
    top:10px;
    opacity:0;
    filter:alpha(opacity=0);
    transform:translateX(-300px);
}
.page5.current .page5-top .page5-top-con:before{
    opacity:1;
    filter:alpha(opacity=100);
    transition:all 1s 1s;
    transform:translateX(0px);
}
.page5 .page5-top .page5-top-con:after{
    content:'';
    width:80px;
    height:80px;
    position:absolute;
    background:url("../images/strawkitty2.png") 0 0 no-repeat;
    background-size:contain;
    right:-90px;
    top:10px;
    opacity:0;
    filter:alpha(opacity=0);
    transform:translateX(300px);
}
.page5.current .page5-top .page5-top-con:after{
    opacity:1;
    filter:alpha(opacity=100);
    transition:all 1s 1s;
    transform:translateX(0px);
}
.page5 .page5-bottom {
    font:normal 400 18px/28px "microsoft yahei";
    width:100%;
    height:50%;
    position:relative;
    transform:translateY(-600px);
}
.page5.current .page5-bottom{
    transition:all 1s;
    transform:translateY(0px);
}
.page5 .page5-bottom .page5-bottom-con {
    position:absolute;
    width:100%;
    left:50%;
    top:20%;
    transform:translate(-50%,-50%);
}
.page5 .page5-bottom p {
    width:100%;
    color:#69250f;
    padding : 0 20px;
}